<template>
    <div>
        <h1 v-text="message"></h1>
        <div class="content_area">
            <div class="navbar">
                <el-row>
                    <router-link active-class="active" to="/home/music">
                        <el-button class="left_music" type="primary" round>播放音乐</el-button>
                    </router-link>
                    <router-link active-class="active" to="/home/film">
                        <el-button class="rigth_film" type="success" round>播放电影</el-button>
                    </router-link>
                    <router-link active-class="active" to="/home/personinfo">
                        <el-button type="info" round>个人信息</el-button>
                    </router-link>
                </el-row>
            </div>
            <div class="main">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Home',
        data() {
            return {
                message: '欢迎你登录成功~'
            }
        },
        created() {
            window.localStorage.getItem("access-admin")
        }
    }
</script>
<style>
    h1 {
        text-align: center;
    }
    .content_area {
        width: 600px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid gray;
    }
    .navbar {
        top: 0px;
        height: 15%;
        width: 100%;
        border-bottom: 1px solid black;
        margin-bottom: 0px;
    }
    .main {
        height: 85%;
        width: 100%;
        bottom: 0px;
        margin-top: 0px;
        text-align: center;
    }
</style>